<template>
  <div class="basic-from" v-dialogDrag>
    <el-dialog
      :close-on-click-modal="false"
      title="新增离点登记"
      :visible.sync="dialogVisible"
      width="72%"
      @close="handleClosed"
    >
      <el-form
        label-width="110px"
        class="form-wrap"
        ref="leaveForm"
        :model="formData"
        :rules="rules"
      >
        <el-form-item label="人员状态" prop="personState">
          <el-select
            v-model="formData.personState"
            placeholder="请选择人员状态"
            @change="personStateChange"
          >
            <el-option
              v-for="item in person_state"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="目的地"
          prop="leave_dest_province"
          v-if="['63','65',].includes(formData.personState)"
        >
          <!--   <el-popover
            placement="bottom"
            width="400"
            trigger="click"
            v-model="delFlagVisibleAreadiog"
          >
            <el-tree
              class="filter-tree"
              :data="treeAreaData"
              lazy
              :load="loadNode"
              :props="defaultAreaProps"
              :filter-node-method="filterNode"
              :expand-on-click-node="false"
              @node-click="handleCheckChangeAreadiog"
              ref="tree"
            ></el-tree>
            <el-input
              v-halfCharCode
              slot="reference"
              maxlength="30"
              placeholder="请选择行政区域"
              v-model="formData.divisionName"
              :suffix-icon="
                  delFlagVisibleArea ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
                "
              clearable
            />
          </el-popover>-->
          <el-cascader
            :options="provinceCityoptions"
            :props="defaultProps"
            clearable
            v-model="formData.leave_dest_province"
          ></el-cascader>
        </el-form-item>
        <el-form-item
          label="目的地"
          prop="leave_dest_province"
          v-if="['64','66'].includes(formData.personState)"
        >
          <ProvinceCity v-model="formData.leave_dest_province" />
          <!-- <el-input v-model="formData.aaa" placeholder="请输入" /> -->
        </el-form-item>
        <el-form-item
          label="隔离点名称"
          v-if="['42'].includes(formData.personState)"
          prop="leaveDestHotelName"
        >
          <el-input v-model="formData.leaveDestHotelName" placeholder="请输入隔离点名称"></el-input>
        </el-form-item>
        <el-form-item
          label="医院名称"
          prop="leaveDestHospitalName"
          v-if="['41'].includes(formData.personState)"
        >
          <el-input v-model="formData.leaveDestHospitalName" placeholder="请输入医院名称"></el-input>
        </el-form-item>
        <el-form-item
          label="详细地址"
          prop="leave_dest_address"
          v-if="['90','63','65'].includes(formData.personState)"
        >
          <el-input v-model="formData.leave_dest_address" placeholder="请输入详细地址名称"></el-input>
        </el-form-item>
        <!-- <el-form-item
          label="接收人"
          v-if="['43','41','42','51','90'].includes(formData.personState)"
        >
          <el-input v-model="formData.transferPers" placeholder="请输入接收人"></el-input>
        </el-form-item>-->
        <!-- <el-form-item
          label="联系电话"
          v-if="['43','41','42','51','90'].includes(formData.personState)"
        >
          <el-input v-model="formData.transferPhone" placeholder="请输入联系电话"></el-input>
        </el-form-item>-->
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="save">提交</el-button>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
import ProvinceCity from "./components/ProvinceCity/index.vue";
import { getDivisionAll } from "@/admin/api/division";
import { putLeaveInfo } from "./api";
export default {
  components: {
    ProvinceCity,
  },
  data() {
    return {
      defaultProps: {
        label: "divisionName",
        value: "divisionCode",
        checkStrictly:true
      },
      provinceCityoptions: [],
      formData: {
        personId: "",
      },
      rules: {
        personState: [
          { required: true, message: "请选择人员状态", trigger: "change" },
        ],
        // releaseIsolationDate: [
        //   { required: true, message: "选择解除隔离时间", trigger: "change" },
        // ],
        // leaveHotelDate: [
        //   { required: true, message: "选择离开隔离点时间", trigger: "change" },
        // ],
        divisionName: [
          { required: true, message: "请选择目的地", trigger: "change" },
        ],
        leave_dest_province: [
          { required: true, message: "请选择目的地", trigger: "change" },
        ],
        leaveDestHospitalName: [
          { required: true, message: "请输入医院名称", trigger: "change" },
        ],
        leaveDestHotelName: [
          { required: true, message: "请输入隔离点名称", trigger: "change" },
        ],
        leave_dest_address: [
          { required: true, message: "请输入详细地址", trigger: "change" },
        ],
        // carNumber: [{ required: false, message: "请输入", trigger: "blur" }],
        // seatNumber: [
        //   { required: false, message: "请输入座位号", trigger: "blur" },
        // ],
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      dialogVisible: false,
      type: "",
      person_state: "",
      isLoadedPersonState: false,
      leavePersonTypes: [],
      delFlagVisibleArea: false,
      delFlagVisibleAreadiog: false,
      treeAreaData: [],
      defaultAreaProps: {
        children: "children",
        label: "divisionName",
      },
      showItemArr: [],
    };
  },
  mounted() {
    // 初始化人员状态
    this.filterPersonState();
    this.getAreaTree();
  },
  methods: {
    getCity(data) {
      data.map((item) => {
        if (item.children && item.children.length > 0) {
          item.children = this.getCity(item.children);
        } else {
          delete item.children;
        }
      });
      return data;
    },
    async getAreaTree() {
      const response = await getDivisionAll({
        parentId: "000000",
      });
      this.provinceCityoptions = this.getCity(response.data.data);
      console.log(this.provinceCityoptions);
    },
    handleCheckChangeAreadiog(data) {
      console.log(data);
      // 拿到区域值
      if (data.divisionCode.length < 12) {
        this.$message.error("目的地必须选择到社区");
        return;
      }
      this.delFlagAreadiog = data.divisionCode;
      this.$set(this.formData, "divisionName", data.divisionName);
      this.$set(this.formData, "leave_dest_province", data.divisionCode);
      this.delFlagVisibleAreadiog = false;
    },
    // 数据过滤
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    async loadNode(node, resolve) {
      let data = [];
      const response = await getDivision({
        lazy: true,
        parentId: node.data.divisionCode ? node.data.divisionCode : "000000",
      });
      data = response.data.data;
      resolve(data);
    },
    filterPersonState() {
      let visiableDict = ["41", "63", "64", "65", "66"];
      this.person_state = this.getDict("person_state").filter((item) =>
        visiableDict.includes(item.value)
      );
    },
    save() {
      this.validateAndSave();
    },
    //开启弹窗,请求数据
    async show({ type, row }) {
      this.formData.personId = row.personId;
      // 请求接口拿到详细数据
      // const res = await this.http(`/api/repairbill/${data.billId}`)
      // this.formData.personState = row.personState;
      this.type = type;
      this.dialogVisible = true;
    },
    // 弹窗关闭还原
    handleClosed() {
      this.uploadFileList = [];
      let _formData = JSON.parse(JSON.stringify(this.formData));
      for (let i in _formData) {
        _formData[i] = "";
      }
      this.formData = _formData;
    },

    personStateChange(val) {
      //根据选择人员状态控制显示隐藏
      // this.showItemArr
      console.log(val);
      ["31", "43", "41", "42", "51", "90"];
      switch (val) {
        case "31":
          //期满解除隔离
          // this.showItemArr=["locatioin",]
          break;
        case "43":
          //转居家隔离
          break;
        case "41":
          //已移交医疗机构
          break;
        case "42":
          //转移其他酒店
          break;
        case "51":
          //自愿返港澳台
          break;
        case "90":
          //其它
          break;
      }
    },
    validateAndSave() {
      if (
        this.formData.personState == "43" &&
        this.formData.location[1] != "440300"
      ) {
        this.$message.error(
          "目的地为深圳市外居家隔离的旅客，请选择移交其他省市区继续隔离观察！"
        );
        return;
      }
      this.$refs.leaveForm.validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "保存中",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });

          if (Array.isArray(this.formData.leave_dest_province)) {
            let temp = this.formData.leave_dest_province;
            this.formData.leave_dest_province = temp[temp.length - 1];
          }
          putLeaveInfo(this.formData).then(
            (resp) => {
              loading.close();
              this.$message.success("已保存");
              this.dialogVisible = false;
              this.$emit("resetList");
              this.$emit("submit");
            },
            (err) => {
              loading.close();
            }
          );
        }
      });
    },
    // 返回一个只包含年月日的日期对象
    getDateYMD(date) {
      return new Date(date.getFullYear(), date.getMonth(), date.getDate());
    },
    getDay(beginDate, endDate) {
      return Math.floor(
        (endDate.getTime() - beginDate.getTime()) / (24 * 3600 * 1000)
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.form-wrap {
  .el-form-item {
    padding: 10px 0;
  }
}
</style>